﻿@page "/app/ecommerce/shop"
@inherits ProComponentBase

<div class="mb-4">
    <MCard Elevation=0 Class="rounded-4 pa-6" Style="min-width:300px;width=300px;float: left;">
        <h6>Filters</h6>

        <span class="text-btn neutral-lighten-4--text mt-1">Multi Range</span>
        <div class="border-b-solid mt-6 mb-12 pl-2">
            <MRadioGroup Dense @bind-Value="MultiRangeText">
                @foreach (var multiRange in _multiRanges)
                {
                    <div class="block-center" style="height:40px;">
                        <MRadio Color="primary" Value="@multiRange.Text">
                            <LabelContent>
                                <span class="@($"{(MultiRangeText==multiRange.Text?"text-subtitle primary--text":"text-body3")}")">@multiRange.Text</span>
                            </LabelContent>
                        </MRadio>
                    </div>
                }
            </MRadioGroup>
        </div>

        <span class="text-btn neutral-lighten-4--text">Categories</span>
        <div class="border-b-solid mt-6 mb-12 pl-2">
            <MRadioGroup @bind-Value="_shopData.Category">
                @foreach (var categorie in _categories)
                {
                    <div class="block-center" style="height:40px;">
                        <MRadio Color="primary" Value="@categorie">
                            <LabelContent>
                                <span class="@($"{(_shopData.Category==categorie?"text-subtitle primary--text":"text-body3")}")">@categorie</span>
                            </LabelContent>
                        </MRadio>
                    </div>
                }
            </MRadioGroup>
        </div>

        <span class="text-btn neutral-lighten-4--text">Brands</span>
        <div class="border-b-solid mt-6 mb-12 pl-2">
            <MRadioGroup @bind-Value="_shopData.Brand">
                @foreach (var brand in _brands)
                {
                    <div class="block-center" style="height:40px;">
                        <MRadio Color="primary" Value="@brand">
                            <LabelContent>
                                <span class="@($"{(_shopData.Brand==brand?"text-subtitle primary--text":"text-body3")}")">@brand</span>
                            </LabelContent>
                        </MRadio>
                    </div>
                }
            </MRadioGroup>
        </div>
    </MCard>
    <div style="float: right;width: calc(100% - 324px);">
        <MRow>
            <MCol Md=4 Sm=12>
                <MCard Elevation=0 Class="line px-6 py-3 block-between">
                    <h6>@_shopData.CurrentCount results found</h6>
                    <MMenu OffsetY OpenOnHover>
                        <ActivatorContent>
                            <div @attributes="@context.Attrs">
                                <span class="text-btn neutral-lighten-4--text">@_shopData.SortTypeLable</span>
                                <MIcon Color="neutral-lighten-4">mdi-menu-down</MIcon>
                            </div>
                        </ActivatorContent>
                        <ChildContent>
                            <MList Class="py-0">
                                <MListItemGroup @bind-Value="_shopData.SortTypeLable" ActiveClass="primary white--text">
                                    <MListItem Value="@(SortType.Featured.ToString())">Featured </MListItem>
                                    <MListItem Value="@(SortType.Lowest.ToString())"> Lowest </MListItem>
                                    <MListItem Value="@(SortType.Highest.ToString())"> Highest </MListItem>
                                </MListItemGroup>
                            </MList>
                        </ChildContent>
                    </MMenu>
                </MCard>
            </MCol>
            <MCol Md=8 Sm=12>
                <MTextField @bind-Value="_shopData.Search" Class="rounded-2 max-height" HideDetails="@("auto")" Height=54 Flat Solo Placeholder="Search Product">
                    <PrependInnerContent>
                        <MIcon Size=16 Class="mr-2 neutral-lighten-1--text">mdi-magnify</MIcon>
                    </PrependInnerContent>
                </MTextField>
            </MCol>
        </MRow>
        <MRow>
            @foreach (var item in _shopData.GetPageDatas())
            {
                <MCol Md=4 Sm=12>
                    <div class="commodity">
                        <MCard Class="rounded-4 content">
                            <MImage Height=260 Contain Src="@item.PictureFile" Class="hover-pointer" @onclick="()=>NavigateToDetails(item.Id)"></MImage>
                            <MCardText Class="pa-3">
                                <div class="block-between">
                                    <MRating Value="item.Rating" Size=20 Dense Readonly Length=5 Color="remind" BackgroundColor="remind"></MRating>
                                    <h6>$@item.Price</h6>
                                </div>
                                <div class="text-subtitle text-truncate my-1">@item.Name</div>
                                <div class="text-truncate text-body3 neutral-lighten-3--text">@item.Description</div>
                            </MCardText>
                            <div class="block-between text-center">
                                <div @onclick="()=>item.Favorite=!item.Favorite" class="rounded-bl-xl hover-pointer favorite" style="width:50%;height:56px;line-height: 56px;box-shadow: inset -1px 0px 0px #F0F3FA, inset 0px 0.5px 0px #F0F3FA;border-bottom-left-radius: 20px !important;">
                                    <MIcon Size=24 Color="@(item.Favorite?"error":"neutral")">@(item.Favorite?"mdi-heart":"mdi-heart-outline")</MIcon>
                                </div>
                                <div @onclick="NavigateToOrder" class="hover-pointer neutral--text order" style="width:50%;height:56px;line-height: 56px;box-shadow: inset -1px 0px 0px #F0F3FA, inset 0px 0.5px 0px #F0F3FA;border-bottom-right-radius: 20px !important;">
                                    <MIcon Size=24 Class="white-order">mdi-cart-outline</MIcon>
                                </div>
                            </div>
                        </MCard>
                    </div>
                </MCol>
            }
        </MRow>
        @if (_shopData.PageCount > 0)
        {
            <MPagination @bind-Value="_shopData.PageIndex" Color="primary" Circle Length=@_shopData.PageCount Class="mt-4 elevation-0"></MPagination>
        }
    </div>
</div>